<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点名器</title>
		<style type="text/css">
			.frame{
				height: 400px;
				width: 600px;
				margin: 100px auto;
				border-radius: 20px;
				border: 1px solid black;
				background: #1B6D85;
				
			}
			.board{
				height: 100px;
				width: 250px;
				margin: 60px auto;
				border-radius: 10px;
				border: 1px solid black;
			}
			.name{
				margin: 20px auto;
				font-size: 50px;
				text-align: center;
			}
			.btn{
				margin: 0px auto;
				display: block;
				background: #419641;
			}
		</style>
	</head>
	<body>
		<div class="frame">
			<div class="board">
				<p id="name" class="name">测试</p>
			</div>
			<input type="button" class="btn" onclick="start()" value="开始"/><br/>
			<input type="button" class="btn" onclick="stop()" value="结束"/><br/>
			<input type="button" class="btn" onclick="reset()" value="重置"/>
			<div id="did"></div>
		</div>
	</body>
	
	<script>
        var sn=document.getElementById("name");
        var da=document.getElementById("did")
        //alert(sn.innerHTML)
        var arr=new Array();
        var did=new Array();
        var s=0;
        var time=0;
        
        //初始化数组
        function init(){
            //alert(sn.innerHTML); //显示内容包括标签
            //alert(sn.innerText); //显示内容不包括标签
            sn.innerHTML="点名器";
            for(var i=0;i<4;i++){
                arr[i]="int"+i;
            }
            s=0;
            time=0;
            did.splice(0,did.length)
        }
        
        //显示运行
        function run(){
            //alert(s);
            if(arr.length>0){
            	sn.innerHTML=arr[s];
            }else{
            	sn.innerHTML="点名完毕";
            }
            
            if(s<arr.length-1){
                s=s+1;
            }else{
                s=0;
            }
        }
        
        //开始
        function start(){
        	if(time==0){
        		time=setInterval("run()",100);
        		//alert(time)
        	}             
        }
        
        //暂停
        function stop(){
            clearInterval(time);
            if(s==0){
            	did.push(arr[arr.length-1])
            }else{
            	did.push(arr[s-1]);
            }
            da.innerHTML="已点名："+did.toString();
            arr.splice(s-1,1);
            //alert(arr.length)
            time=0;
            s=0;
        }
        
        //重置
        function reset(){
        	init();
        	da.innerHTML="";
        }
        
        //初始化
        init();
    </script>
    
</html>
